<template id='temp'>
   <el-container class="home-container">
    <!--头部区域!--> 
         <el-header>
        <div class="tubiao">
            <img src="../assets/logo.png" alt="">
            <span>电商后台管理系统</span>
          
        </div>
          <el-button type='info' @click='layout'>退出</el-button>
         </el-header>

  <el-container>
        <!--侧边栏-->
        <el-aside :width="isCollapse ? '64px': '200px'" >
        <div class="toggle-button" @click='toggleCollapse' >|||</div>
       
         <!--侧边栏表单区域 -->
<el-menu  :defalut-active='activePath' :router="true" :collapse-transition="false"  unique-opened :collapse='isCollapse' default-active="1" class="el-menu-vertical-demo" background-color="#333744" text-color='#fff' active-text-color='#409EFF'>
     <!--一级菜单 -->
  <el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">
  <!--一级菜单模板区域 -->
    <template slot="title">
     <!--图标 -->
      <i :class="iconsObj[item.id]"></i>
      
       <!--文本 -->
      <span >{{item.authName}}</span>
    </template>
     <!--二级菜单 -->
      <el-menu-item @click="saveNavState('/'+subItem.path)" :index="'/'+subItem.path" v-for="subItem in item.children" :key='subItem.id'>
       <!--二级菜单模板区域 -->
        <template slot="title">
         <!--图标 -->
      <i class="el-icon-location"></i>
       <!--文本 -->
      <span >{{subItem.authName}}</span>
    </template>
      </el-menu-item>
    </el-submenu>
 
</el-menu>
        </el-aside>
        <!-- 右侧内容主题 -->
        <el-main>
            <!-- 路由占位符 -->
            <router-view></router-view>
        </el-main>
  </el-container>
</el-container>

</template>

<script>
    export default{

        data(){
                return{
                    // 左侧菜单数据
                    menuList:[],
                    // 定义图标
                    iconsObj:{
                        '125':'iconfont icon-user',
                        '103':'iconfont icon-tijikongjian',
                        '101':'iconfont icon-shangpin',
                        '102':'iconfont icon-danju',
                        '145':'iconfont icon-baobiao'
                    },
                      // 是否折叠
                        isCollapse:false,  
                        // 被激活的链接地址
                        activePath:''
                }
        },
        created(){
            // 在created阶段请求左侧边栏的数据
            this.getMenuList()
            this.activePath=window.sessionStorage.getItem('activePath')
        },

        methods:{
            layout(){
                // 清除token
                window.sessionStorage.clear()
                // 编程导航回到登录页面
                this.$router.push('/login');
            },
            // 获取所有菜单数据
            async getMenuList(){
                const {data:res}=await this.$http.get('menus')
                // console.log(res);
                if(res.meta.status!==200) return this.$message.error(res.meta.msg)
                this.menuList=res.data;
                // console.log(this.menuList);
             },
            
            

            //  点击按钮，切换菜单的折叠与展开
            toggleCollapse(){
                this.isCollapse=!this.isCollapse

            },
            // 保存链接的激活状态
            saveNavState(activePath){
                window.sessionStorage.setItem('activePath',activePath)
                this.activePath=activePath
            }
        }

    };
</script>

<style scoped>
.home-container{
    height: 100%;

}
.el-header{
    background-color: #373d41;
    display: flex;
    justify-content: space-between;
    color: yellow;
    align-items: center;
    padding-left: 0;
    font-size: 20px;

}
.el-aside{
    background-color: #333744;

   
}
  /* 注意 */
  .el-menu{
        border-right: none;
    }


.el-header img{
    width: 40px;
    height: 40px;
}
.el-header div{
    display:flex;
    align-items: center;
}
.el-main{
    background-color: #eaedf1;
   
}
.el-header div span{
    margin-left: 20px;
}
.toggle-button{
    background-color: #4a5064;
    font-size: 10px;
    line-height: 24px;
    color: #fff;
    text-align: center;
    letter-spacing: 0.2em;
    cursor: pointer;    
}


</style>